<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">
<h:head>
	<ui:include src="include_styles.xhtml" />
	<link rel="stylesheet" media="screen,projection" type="text/css" href="#{request.contextPath}/basic.css" /> <!-- RESET -->
    <title>Mapas</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBTljJvgx0exp5uQuoVtMU1wFVrRxBSAwuscltOq15b6TEGgnk_KLiv34A"
      type="text/javascript"></script> 
      <style>
		
		#tabla{ width: 250px; float: left;}
		#mapa{ width: 580px; float: left; padding: 5px 10px 5px 10px;}
		
	</style> 
</h:head>
<h:body bgcolor="white">
<div id="main">

	<ui:include src="header.xhtml" />
	<!-- /header -->

	<!-- /header -->

	<hr class="noscreen" />

	<!-- Columns -->
	<div id="cols" class="box">
	

		<hr class="noscreen" />

		<!-- Content (Right Column) -->
		<div id="content" class="box">	
    <h:form id="mashupForm">
        <h2>
            Destinatarios del Proyecto
        </h2>
        <div>
			<div id="tabla"  >
        <h:dataTable id="tblDestinatarios"
                     styleClass="standardTable"
                     headerClass="standardTable_Header"
                     footerClass="standardTable_Header"
                     rowClasses="standardTable_Row1,standardTable_Row2"
                     columnClasses="standardTable_Column,standardTable_ColumnCentered,standardTable_Column"        
                     value="#{mapaBean.destinatarios}" 
                     var="row">
            
            <h:column>
              <f:facet name="header">
                <h:outputText value="Nombre"/>
              </f:facet>
              <h:outputText value="#{row.nombre}"/>
            </h:column>
            <h:column>
              <f:facet name="header">
                <h:outputText value="Direccion"/>
              </f:facet>
              <h:outputText value="#{row.direccion}"/>
            </h:column>            
            <h:column>
              <f:facet name="header">
                <h:outputText value="Accion"/>
              </f:facet>
              <h:commandLink id="cmdShow" value="Ver mapa">           
              	 <f:ajax render="mapGroup">
              		<f:param name="selectedCapital" value="#{row.nombre}"/>
              		<f:param name="continent" value="#{row.direccion}"/>     
              		<f:param name="selectedCountry" value="#{row.direccion}"/>   
              	 </f:ajax>		
           	  </h:commandLink>
            </h:column>
        </h:dataTable>  
        <h:commandButton value="Volver" action="#{mapaBean.volver}"   id="volver" type="submit" class="button" />
        </div>	     	
       
       	<div id="mapa" align="right">
       	<h:panelGroup id="mapGroup">
            <m:map id="map" width="460px" height="460px"
        	 		type="G_NORMAL_MAP" 
        	 		address="#{param.selectedCountry}" 
        	 		rendered="#{param.selectedCountry ne null}"
        	 		renderOnWindowLoad="false" zoom="8">
        	   <m:marker id="marker"/>
        	   <m:htmlInformationWindow id="window" htmlText="Destino: #{param.selectedCapital} &lt;br&gt;Direccion: #{param.continent}"/>
        	</m:map>
        	<h:outputText rendered="#{param.selectedCountry == null}" 
        	value="No selecciono ningun Destinatario"></h:outputText>
       	</h:panelGroup>
       	</div>
       	
       	</div>		

    </h:form>
    		</div> <!-- /content -->

	</div> <!-- /cols -->

	<hr class="noscreen" />



	<!-- Footer -->
		<ui:include src="footer.xhtml" />
	<!-- /footer -->

</div> <!-- /main -->
</h:body>
</html>  